<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="model/layui/src/css/layui.css">
		<link rel="stylesheet" href="model/animate/animate.css">
		<style>

			.bobey-nav-box{
				position: fixed;
				width: 100%;
				height: 60px;
				background-color: #393D49;
				
			}
			.bobey-nav-box>div{
				float: left;
			}
			.bobey-nav{
				width: 80%;	
				text-align: center;
				
			}
			.bobey-nav-btns,.bobey-nav-logo{
				line-height: 60px;
				width: 10%;
			}
			.bobey-aside-button{
				display: none;
			}
			
			 @media screen and (max-width: 785px) {
				.bobey-nav{
					position: absolute;
					opacity: 0;
	
				}
				 .bobey-nav>ul{
					 margin-top: 60px;
					 width: 100vw;
				 }
				 .bobey-nav-btns,.bobey-nav-logo{
					 width: 50%;
					 float: right;
				 }
				 .bobey-aside-button{
				 	display: block;
				 }
				 .bobey-nav-btns button{
					display: inline-block;
				 }
			 }
		</style>
	</head>
	<body>
		<nav class="bobey-nav-box" id="bobey-nav-box">
			<div class="bobey-nav-logo">
				我是logo
			</div>
			<div class="bobey-nav">
				<ul class="layui-nav animated" id="bobey-nav">
					<li class="layui-nav-item">
						<a href="">控制台<span class="layui-badge">9</span></a>
					</li>
					<li class="layui-nav-item">
						<a href="">个人中心<span class="layui-badge-dot"></span></a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<!-- 二级菜单 -->
							<dd><a href="">移动模块</a></dd>
							<dd><a href="">后台模版</a></dd>
							<dd><a href="">电商平台</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;">修改信息</a></dd>
							<dd><a href="javascript:;">安全管理</a></dd>
							<dd><a href="javascript:;">退了</a></dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="layui-btn-group bobey-nav-btns">
				<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-notice"></i></button>
				<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-headset"></i></button>
				<button type="button" class="layui-btn layui-btn-primary layui-btn-sm bobey-aside-button" id="bobey-aside-button"><i
					 class="layui-icon layui-icon-more"></i></button>
			</div>
		</nav>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<script src="model/layui/src/layui.js"></script>
		<script src="model/headroom/headroom.js"></script>
		<script>
			//注意：导航 依赖 element 模块，否则无法进行功能性操作
			layui.use(['element', 'jquery'], function() {
				var element = layui.element;
				var $ = layui.jquery;
				$("#bobey-aside-button").click(function() {                     
					 $("#bobey-nav-box").removeClass("slideInDown");
					if ($("#bobey-nav").hasClass("fadeInLeft")) {                        
						$("#bobey-nav").removeClass("fadeInLeft");
						$("#bobey-nav").addClass("fadeOutLeft");
						$("body").css("overflow-y", "auto");
					} else {
						$("body").css("overflow-y", "hidden");
						$("#bobey-nav").removeClass("fadeOutLeft");
						$("#bobey-nav").addClass("fadeInLeft");
					}
				});
				window.onresize = function() {
					bobeyNavInit();
				}
				function bobeyNavInit() {			 
					if ($(window).width() < 769) {					
						$("#bobey-nav").addClass("layui-nav-tree layui-nav-side");
						$("#bobey-nav").removeClass("fadeInLeft");
						$("#bobey-nav").addClass("fadeOutLeft");
					} else {
						if ($("#bobey-nav").hasClass('layui-nav-tree')) {
							$("#bobey-nav").removeClass("layui-nav-tree layui-nav-side");
							$("#bobey-nav").removeClass("fadeOutLeft");
							$("#bobey-nav").addClass("fadeInLeft");
						}
					}
					setTimeout(function(){
						$(".bobey-nav").css('opacity',1);
					},1000);
					
				}
				bobeyNavInit();
				// grab an element
				var elem = document.getElementById("bobey-nav-box");
				var headroom = new Headroom(elem, {
					"tolerance": 5,
					"offset": 205,
					"classes": {
						"initial": "animated",
						"pinned": "slideInDown",
						"unpinned": "slideOutUp"
					}
				});
				headroom.init();
				//…
			});
		</script>
	</body>
</html>
